<template>
  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
    >
      <el-table-column
        label="序号"
        align="center"
        prop="id"
        type="index"
        width="90px"
      />
      <el-table-column
        label="客户"
        align="center"
        prop="creator"
        width="100px"
      />
      <el-table-column
        label="功能完整性"
        align="center"
        prop="functionality"
        width="100px"
      />
      <el-table-column
        label="性能稳定性"
        align="center"
        prop="performance"
        width="100px"
      />
      <el-table-column
        label="使用体验"
        align="center"
        prop="experience"
        width="100px"
      />
      <el-table-column
        label="安全性"
        align="center"
        prop="security"
        width="100px"
      />
      <el-table-column
        label="文档完整性"
        align="center"
        prop="documentation"
        width="100px"
      />
      <el-table-column
        label="未通过说明"
        align="center"
        prop="failureReason"
        width="100px"
      />
      <el-table-column
        label="产品质量-功能实用性"
        align="center"
        prop="functionUsefulness"
        width="180px"
      />
      <el-table-column
        label="功能实用性-原因说明"
        align="center"
        prop="functionUsefulnessComment"
        width="180px"
      />
      <el-table-column
        label="产品质量-耐用性/稳定性"
        align="center"
        prop="durability"
        width="180px"
      />
      <el-table-column
        label="耐用性-原因说明"
        align="center"
        prop="durabilityComment"
        width="180px"
      />
      <el-table-column
        label="服务体验-售前咨询专业性"
        align="center"
        prop="preSales"
        width="185px"
      />
      <el-table-column
        label="售前咨询-原因说明"
        align="center"
        prop="preSalesComment"
        width="180px"
      />
      <el-table-column
        label="服务体验-售后响应速度"
        align="center"
        prop="afterSales"
        width="180px"
      />
      <el-table-column
        label="售后响应-原因说明"
        width="180px"
        align="center"
        prop="afterSalesComment"
      />
      <el-table-column
        label="性价比"
        align="center"
        prop="valueForMoney"
        width="100px"
      />
      <el-table-column
        label="性价比-原因说明"
        align="center"
        prop="valueForMoneyComment"
        width="180px"
      />
      <el-table-column
        label="品牌忠诚度-重复购买意愿"
        align="center"
        prop="repurchase"
        width="185px"
      />
      <el-table-column
        label="重复购买-原因说明"
        align="center"
        prop="repurchaseComment"
        width="180px"
      />
      <el-table-column
        label="总体满意度"
        align="center"
        prop="overallSatisfaction"
        width="100px"
      />
      <el-table-column
        label="是否再次使用"
        align="center"
        prop="reuse"
        width="120px"
      />
      <el-table-column
        label="改进建议"
        align="center"
        prop="suggestions"
        width="100px"
      />
      <el-table-column
        label="其他建议"
        align="center"
        prop="comments"
        width="100px"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column
        label="操作"
        align="center"
        min-width="120px"
        fixed="right"
      >
        <template #default="scope">
          <el-button link type="primary" @click="openDetail(scope.row)">
            详情
          </el-button>
          <!-- <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['health:robot-survey:update']"
          >
            编辑
          </el-button> -->
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['health:robot-survey:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <RobotSurveyForm ref="formRef" @success="getList" />
  <!-- 详情弹窗 -->
  <el-dialog
    v-model="detailVisible"
    title="满意度调查详情"
    width="80%"
    top="5vh"
    class="detail-dialog"
  >
    <div class="detail-container">
      <!-- 基本信息部分保持不变 -->
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">客户：</span>
            <span class="detail-value">{{ detailData.creator }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">创建时间：</span>
            <span class="detail-value">{{
              formatDetailDate(detailData.createTime)
            }}</span>
          </div>
        </div>
      </div>

      <!-- 产品质量评估 -->
      <div class="detail-section">
        <h3 class="section-title">产品质量评估</h3>
        <div class="detail-grid">
          <!-- ...其他字段... -->
          <div class="detail-item">
            <span class="detail-label">产品质量-功能实用性：</span>
            <span class="detail-value">{{
              detailData.functionUsefulness
            }}</span>
          </div>
          <div class="detail-item" v-if="detailData.functionUsefulness < 3">
            <span class="detail-label">功能实用性-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.functionUsefulnessComment
            }}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">产品质量-耐用性/稳定性：</span>
            <span class="detail-value">{{ detailData.durability }}</span>
          </div>
          <div class="detail-item" v-if="detailData.durability < 3">
            <span class="detail-label">耐用性-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.durabilityComment
            }}</span>
          </div>
        </div>
      </div>

      <!-- 服务体验 -->
      <div class="detail-section">
        <h3 class="section-title">服务体验</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">售前咨询专业性：</span>
            <span class="detail-value">{{ detailData.preSales }}</span>
          </div>
          <div class="detail-item" v-if="detailData.preSales < 3">
            <span class="detail-label">售前咨询-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.preSalesComment
            }}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">售后响应速度：</span>
            <span class="detail-value">{{ detailData.afterSales }}</span>
          </div>
          <div class="detail-item" v-if="detailData.afterSales < 3">
            <span class="detail-label">售后响应-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.afterSalesComment
            }}</span>
          </div>
        </div>
      </div>

      <!-- 综合评估 -->
      <div class="detail-section">
        <h3 class="section-title">综合评估</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">性价比：</span>
            <span class="detail-value">{{ detailData.valueForMoney }}</span>
          </div>
          <div class="detail-item" v-if="detailData.valueForMoney < 3">
            <span class="detail-label">性价比-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.valueForMoneyComment
            }}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">品牌忠诚度-重复购买意愿：</span>
            <span class="detail-value">{{ detailData.repurchase }}</span>
          </div>
          <div class="detail-item" v-if="detailData.repurchase < 3">
            <span class="detail-label">重复购买-原因说明：</span>
            <span class="detail-value detail-long">{{
              detailData.repurchaseComment
            }}</span>
          </div>
        </div>
      </div>

      <!-- 建议反馈部分保持不变 -->
      <div class="detail-section">
        <h3 class="section-title">建议反馈</h3>
        <div class="detail-grid">
          <div class="detail-item full-width">
            <span class="detail-label">改进建议：</span>
            <span class="detail-value detail-long">{{
              detailData.suggestions
            }}</span>
          </div>
          <div class="detail-item full-width">
            <span class="detail-label">其他建议：</span>
            <span class="detail-value detail-long">{{
              detailData.comments
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  dateFormatter as tableDateFormatter,
  formatDate,
} from "@/utils/formatTime";
import download from "@/utils/download";
import { RobotSurveyApi, RobotSurveyVO } from "@/api/health/robotsurvey";
import RobotSurveyForm from "./RobotSurveyForm.vue";

/** 满意度调查 列表 */
defineOptions({ name: "RobotSurvey" });

const message = useMessage(); // 消息弹窗
const { t } = useI18n(); // 国际化

const loading = ref(true); // 列表的加载中
const list = ref<RobotSurveyVO[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  libraryId: undefined,
  functionality: undefined,
  performance: undefined,
  experience: undefined,
  security: undefined,
  documentation: undefined,
  failureReason: undefined,
  functionUsefulness: undefined,
  functionUsefulnessComment: undefined,
  durability: undefined,
  durabilityComment: undefined,
  preSales: undefined,
  preSalesComment: undefined,
  afterSales: undefined,
  afterSalesComment: undefined,
  valueForMoney: undefined,
  valueForMoneyComment: undefined,
  repurchase: undefined,
  repurchaseComment: undefined,
  overallSatisfaction: undefined,
  reuse: undefined,
  suggestions: undefined,
  comments: undefined,
  createTime: [],
});
const queryFormRef = ref(); // 搜索的表单
const exportLoading = ref(false); // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    const data = await RobotSurveyApi.getRobotSurveyPage(queryParams);
    list.value = data.list;
    total.value = data.total;
    console.log(list.value, "list.value");
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id);
};

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm();
    // 发起删除
    await RobotSurveyApi.deleteRobotSurvey(id);
    message.success(t("common.delSuccess"));
    // 刷新列表
    await getList();
  } catch {}
};

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;
    const data = await RobotSurveyApi.exportRobotSurvey(queryParams);
    download.excel(data, "满意度调查.xls");
  } catch {
  } finally {
    exportLoading.value = false;
  }
};
// 详情弹窗相关
const detailVisible = ref(false);
const detailData = ref<RobotSurveyVO>({} as RobotSurveyVO);

/** 打开详情弹窗 */
const openDetail = (row: RobotSurveyVO) => {
  detailData.value = row;
  detailVisible.value = true;
};
const formatDetailDate = (time: any) => {
  return time ? formatDate(time) : "";
};

// 保留原表格的日期格式化
const dateFormatter = (_row: any, _column: any, cellValue: any) => {
  return tableDateFormatter(_row, _column, cellValue);
};
/** 初始化 **/
onMounted(() => {
  getList();
});
</script>

<style scoped>
.detail-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
}

.detail-section {
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.detail-section:last-child {
  border-bottom: none;
}

.section-title {
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e1e1e1;
  color: #409eff;
  font-size: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px 24px;
}

.detail-item {
  display: flex;
  min-height: 32px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-label {
  font-weight: bold;
  color: #606266;
  min-width: 180px;
  text-align: right;
  padding-right: 12px;
}

.detail-value {
  flex: 1;
  color: #303133;
  word-break: break-word;
}

.detail-long {
  line-height: 1.6;
  padding: 8px 0;
}

@media (max-width: 992px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-dialog {
    width: 95% !important;
  }

  .detail-label {
    min-width: 140px;
  }
}
</style>
